<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="flex flex-col h-full">
    <header class="mb-5 nifi-header">
        <navigation></navigation>
    </header>
    <div class="pb-5 px-5 flex-1 flex flex-col">
        <h3 class="primary-color">Manage Remote Ports</h3>
        @if (portsState$ | async; as portsState) {
            <div class="grid-container grid grid-cols-2">
                <div class="col-span-1 pr-5">
                    <div class="flex flex-col mb-5">
                        <div>Name</div>
                        <div
                            class="overflow-ellipsis overflow-hidden whitespace-nowrap tertiary-color font-medium"
                            [title]="portsState.rpg?.id">
                            {{ portsState.rpg?.id }}
                        </div>
                    </div>
                </div>
                <div class="col-span-1">
                    <div class="flex flex-col mb-5">
                        <div>Urls</div>
                        <div
                            class="overflow-ellipsis overflow-hidden whitespace-nowrap tertiary-color font-medium"
                            [title]="portsState.rpg?.component?.targetUri">
                            {{ portsState.rpg?.component?.targetUri }}
                        </div>
                    </div>
                </div>
            </div>
            @if (isInitialLoading(portsState)) {
                <div>
                    <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
                </div>
            } @else {
                <div class="flex flex-col h-full gap-y-2">
                    <div class="flex-1">
                        <div class="manage-remote-ports-table relative h-full">
                            <div class="listing-table absolute inset-0 overflow-y-auto">
                                <table
                                    mat-table
                                    [dataSource]="dataSource"
                                    matSort
                                    matSortDisableClear
                                    (matSortChange)="sortData($event)"
                                    [matSortActive]="initialSortColumn"
                                    [matSortDirection]="initialSortDirection">
                                    <!-- More Details Column -->
                                    <ng-container matColumnDef="moreDetails">
                                        <th mat-header-cell *matHeaderCellDef></th>
                                        <td mat-cell *matCellDef="let item">
                                            <div class="flex items-center gap-x-2">
                                                @if (hasComments(item)) {
                                                    <div
                                                        class="pointer fa fa-comment primary-color"
                                                        nifiTooltip
                                                        [delayClose]="false"
                                                        [tooltipComponentType]="TextTip"
                                                        [tooltipInputData]="item.comments"></div>
                                                }
                                                @if (portExists(item)) {
                                                    <div
                                                        class="pointer fa fa-warning invalid caution-color"
                                                        nifiTooltip
                                                        [delayClose]="false"
                                                        [tooltipComponentType]="TextTip"
                                                        tooltipInputData="This port has been removed."></div>
                                                }
                                            </div>
                                        </td>
                                    </ng-container>

                                    <!-- Name Column -->
                                    <ng-container matColumnDef="name">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatName(item)">
                                            {{ formatName(item) }}
                                        </td>
                                    </ng-container>

                                    <!-- Type Column -->
                                    <ng-container matColumnDef="type">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Type</div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatType(item)">
                                            {{ formatType(item) }}
                                        </td>
                                    </ng-container>

                                    <!-- Tasks Column -->
                                    <ng-container matColumnDef="tasks">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                                Concurrent Tasks
                                            </div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatTasks(item)">
                                            <span
                                                [class.neutral-color]="!item.concurrentlySchedulableTaskCount"
                                                [class.blank]="!item.concurrentlySchedulableTaskCount">
                                                {{ formatTasks(item) }}
                                            </span>
                                        </td>
                                    </ng-container>

                                    <!-- Compression Column -->
                                    <ng-container matColumnDef="compression">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                                Compressed
                                            </div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatCompression(item)">
                                            {{ formatCompression(item) }}
                                        </td>
                                    </ng-container>

                                    <!-- Batch Count Column -->
                                    <ng-container matColumnDef="count">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                                Batch Count
                                            </div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatCount(item)">
                                            <span
                                                [class.neutral-color]="isCountBlank(item)"
                                                [class.blank]="isCountBlank(item)">
                                                {{ formatCount(item) }}
                                            </span>
                                        </td>
                                    </ng-container>

                                    <!-- Batch Size Column -->
                                    <ng-container matColumnDef="size">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                                Batch Size
                                            </div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatSize(item)">
                                            <span
                                                [class.neutral-color]="isSizeBlank(item)"
                                                [class.blank]="isSizeBlank(item)">
                                                {{ formatSize(item) }}
                                            </span>
                                        </td>
                                    </ng-container>

                                    <!-- Batch Duration Column -->
                                    <ng-container matColumnDef="duration">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                            <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                                Batch Duration
                                            </div>
                                        </th>
                                        <td mat-cell *matCellDef="let item" [title]="formatDuration(item)">
                                            <span
                                                [class.neutral-color]="isDurationBlank(item)"
                                                [class.blank]="isDurationBlank(item)">
                                                {{ formatDuration(item) }}
                                            </span>
                                        </td>
                                    </ng-container>

                                    <!-- Actions Column -->
                                    <ng-container matColumnDef="actions">
                                        <th mat-header-cell *matHeaderCellDef></th>
                                        <td mat-cell *matCellDef="let port">
                                            <div class="flex items-center justify-end gap-x-2">
                                                @if (
                                                    (port.exists === true &&
                                                        port.connected === true &&
                                                        port.transmitting === false) ||
                                                    (currentRpg && port.transmitting) ||
                                                    (currentRpg && port.connected && port.exists)
                                                ) {
                                                    <button
                                                        mat-icon-button
                                                        type="button"
                                                        [matMenuTriggerFor]="actionMenu"
                                                        class="h-16 w-16 flex items-center justify-center icon global-menu">
                                                        <i class="fa fa-ellipsis-v"></i>
                                                    </button>
                                                }
                                                <mat-menu #actionMenu="matMenu" xPosition="before">
                                                    @if (
                                                        port.exists === true &&
                                                        port.connected === true &&
                                                        port.transmitting === false
                                                    ) {
                                                        <button mat-menu-item (click)="configureClicked(port)">
                                                            <i class="fa fa-cog primary-color mr-2"></i>
                                                            Edit Port
                                                        </button>
                                                    }

                                                    @if (currentRpg) {
                                                        @if (port.transmitting) {
                                                            <button mat-menu-item (click)="toggleTransmission(port)">
                                                                <i
                                                                    class="not-transmitting icon icon-transmit-false primary-color mr-2"></i>
                                                                Disable transmission
                                                            </button>
                                                        } @else {
                                                            @if (port.connected && port.exists) {
                                                                <button
                                                                    mat-menu-item
                                                                    (click)="toggleTransmission(port)">
                                                                    <i
                                                                        class="fa fa-bullseye transmitting primary-color mr-2"></i>
                                                                    Enable transmission
                                                                </button>
                                                            }
                                                        }
                                                    }
                                                </mat-menu>
                                            </div>
                                        </td>
                                    </ng-container>

                                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                                    <tr
                                        mat-row
                                        *matRowDef="let row; let even = even; columns: displayedColumns"
                                        (click)="select(row)"
                                        [class.selected]="isSelected(row)"
                                        [class.even]="even"></tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between">
                        <div class="text-sm flex items-center gap-x-2">
                            <button
                                mat-icon-button
                                class="primary-icon-button"
                                (click)="refreshManageRemotePortsListing()">
                                <i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
                            </button>
                            <div>Last updated:</div>
                            <div class="tertiary-color font-medium">
                                {{ portsState.loadedTimestamp }}
                            </div>
                        </div>
                    </div>
                </div>
            }
        }
    </div>
</div>
